<template>
    <el-form class="my-1">
        <el-form-item>
            <el-button icon="el-icon-plus"  type="primary" @click="openDialog">{{$t('basProcess.bind')}}</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" style="width: 100%;height:86%" stripe
        :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
<!--        <el-table-column type="selection" width="40" align="center" />-->
        <el-table-column type="index" label="#" width="50"/>
        <el-table-column prop="locationTypeCode" :label="$t('basProcess.locationTypeCode')" width="120" show-overflow-tooltip>
					<template #default="scope">
						<el-tag>{{ scope.row.locationTypeCode }}</el-tag>
					</template>
				</el-table-column>
        <el-table-column prop="locationCode" :label="$t('basProcess.locationCode')"  show-overflow-tooltip/>
        <el-table-column prop="locationName" :label="$t('basProcess.locationName')"  show-overflow-tooltip  />
        <el-table-column prop="productionLineCode" :label="$t('basProcess.productionLineCode')"  width="340">
					<template #default="scope">
						<el-button-group size="small">
							<el-button type="info" class="w-[140px]">{{scope.row.productionLineName}}</el-button>
							<el-button class="w-[140px]" plain>{{scope.row.productionLineCode}}</el-button>
						</el-button-group>
					</template>
				</el-table-column>
<!--        <el-table-column prop="productionLineName" :label="$t('basProcess.productionLineName')"  />-->
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />

  <bindForm ref="bindFormDialogRef" @refresh="getDataList(false)"/>
  <!-- <bindForm ref="bindFormDialogRef"/> -->

</template>


<script setup lang="ts">
//  table hook
import {BasicTableProps, useTable} from "/@/hooks/table";
import {getProcessLocationByPrdlineid} from "/@/api/platform/digital/basProcess";
import {reactive} from "vue";
import {useMessage} from "/@/hooks/message";
import BindForm from "/@/views/digital/basProcess/bindForm.vue";
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
const bindFormDialogRef = ref()

onMounted(() => {
  console.log("页面加载成功2")
  console.log(bindFormDialogRef.value)
})

let warehouseId = ''
let productionLineCode=''
let productionLineName = ''
const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getProcessLocationByPrdlineid
})

//校验打开新增
const openDialog = (data:any) =>{
    if ( state.queryForm.id) {
        //打开bindForm.vue表格
        bindFormDialogRef.value.openDialog(state.queryForm.id,warehouseId,state.dataList,productionLineCode,productionLineName)
    }else{
        useMessage().error(t('basProcess.selectProductionLine'))
    }
}

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

// 刷新表格
const refresh = (row:any,prdlineid:any,warehouseid:any) => {
    state.queryForm.id = row.id
    state.queryForm.prdLineid = prdlineid
    productionLineCode = row.productionLineCode
    productionLineName = row.productionLineName
    warehouseId = warehouseid
    getDataList()
}


// 暴露变量
defineExpose({
    refresh
});

</script>